Accessibility
Home / DevNet / Dreamweaver Development Center /
DevNet
Dreamweaver Article
Icon or Spacer Icon or Spacer Icon or Spacer
Murray Summers
Murray Summers
http://www.great-web-sights.com/
 
Brad Halstead
Brad Halstead
dreamweavermx-templates
  
Using Parameters and Expressions to Make a Breadcrumb Trail Within a Template-Driven Website


How many times have you wanted to have a visible trail through the folder architecture of your website for easy navigation to a previous area, as seen on the Macromedia site? It is an easily understood and instantaneous 'roadmap' of where you are in the current site, and how to get back the way you came in. Breadcrumb trails are a particularly effective tool in a complex network of files and navigation links.

There are many ways to implement this nice little feature—but doing so in a template controlled environment can prove challenging.

Options for Creating Breadcrumb Trails
There are several strategies available that you can use. Some are server-side, some use JavaScript routines to calculate the current position, and others are hand made on each and every page (YIKES!).

While we recommend that you use a JavaScript routine or a server-side solution, we were asked by a template enthusiast (Chuck Parish) how to troubleshoot some issues that he was having with templates, parameters, mouse-over events to change the browser status bar and the breadcrumb trail.  Our solution worked well for him—and may help you with your website, too.

 
Sample Files
Before you begin, you should download the sample files to follow along with this tutorial:
Windows  
Download the sample file crumb_trails.zip (20K)    
 
Now let's get started.
 
  1. Open your file management software (Windows Explorer or Macintosh Finder) and create a new folder somewhere on your local hard drive. Extract or unstuff the sample files into the new folder you just created.The downloadable sample files contain files and folders in a compressed format (ZIP for Windows and SIT for Macintosh users). When you extract these files, it's important that you do so in a manner that will retain the original folder structure.

  2. Launch Dreamweaver MX and create a new site definition (using the Site > New Site... ).  Set the local root path to the folder named crumb_trails, which is located inside the folder that you created in step 1. Name this site whatever you want.

  3. Open the templates named woohoo.dwt; ugh.dwt and drat.dwt located in the Templates folder. These are the templates that we used to experiment with, as we developed the trail navigation block.  Set your page view setting to the Standard View (NOT Layout View) so that you can see both the code and design views (split-screen). This will make it easier to see what's going on in the code.

  4. Open the child page named folder1/folder2/page2.html. This is a child page that was created from the template named woohoo.dwt to show the functionality and control of the crumb trail using template parameters and expressions.

  5. Leave all the files open so that you can easily switch between them as we run through the description below of what was done and why.
 
Experimenting with the Templates
The objective of this exercise (as explained to us by Chuck) was to provide a template solution for a breadcrumb trail system using the expressions and parameters in Dreamweaver MX.  The breadcrumb trail should show the path by which the user arrived on any given page in the tree structure. The items in the path should be hyperlinked, and when moused over, the status bar message of the browser should change, displaying a descriptive navigation message rather than a URL. The current page should not be linked, but Chuck also wanted a next and previous page navigation method. The template parameter was to be controlled through the Modify > Template Properties... dialog. Sounds simple, right?
 
Attempt 1 (100% Failed)
We tried making a unique parameter in the template that would contain the whole string for the breadcrumb trail. Then, on each child page, we modified the parameter value using the Modify > Template Properties... dialog to show a new string or breadcrumb trail for each page in the site.
 
Sample Code for Attempt 1
Our first attempt can be analyzed by looking at the files ugh.dwt and ugh-Index.html. Here's a snippet of the code we used:
 
<!-- TemplateParam 
     name="trailsegment"
     type="text"
     value="<a href=&quot;page1.html&quot;onMouseOver=&quot;window.status=&#39;Return to Page 1 of How to find
God.&#39;;return true&quot; onMouseOut=&quot;window.status=&#39;&#39;;return
true&quot;>Page 2</a><span class=&quot;navcrumbstitle&quot;>&gt; </span>"
-->
 
The Problems with Attempt 1
This methodology was abandoned due to the fact that the string was complex in nature as related to double and single quotations.  Although a workaround could be provided, the Modify > Template Properties... menu item and the interface of Dreamweaver MX would not read or manage the current parameter value. In other words, it was an impending train wreck from a maintenance point of view!  This in turn revealed another issue—if you changed the parameter value in code view, the change would not propagate on the child page(s) until the Modify > Template Properties... was opened and closed. Opening and closing the Template Properties dialog forced the Template engine to run, which then updated the parameter value used on the page from based on the value set manually in the head. This approach would make it too labor-intensive to update each page.
 
Attempt 2 (75% Passed, 25% Failed)
Our next strategy involved separating the modifiable content of the string into unique parameters.
 
Sample Code for Attempt 2
Our second attempt is replicated in the files drat.dwt and drat-Index.html. Here's some of the code we used:
 
Head Region:
<!-- TemplateParam name="Displayroot" type="boolean" value="true" -->
<!-- TemplateParam name="Nameroot" type="text" value="Home" -->
<!-- TemplateParam name="URLroot" type="text" value="index.html" -->
<!-- TemplateParam name="Statusroot" type="text" value="Return to our Home Page" -->
<!-- TemplateParam name="Displaylvl1" type="boolean" value="true" -->
<!-- TemplateParam name="Namelvl1" type="text" value="Folder Level 1" -->
<!-- TemplateParam name="URLlvl1" type="text" value="folder1/index.html" -->
<!-- TemplateParam name="Statuslvl1" type="text" value="Go to Folder 1 [root]" -->
<!-- TemplateParam name="Displaylvl2" type="boolean" value="true" -->
<!-- TemplateParam name="Namelvl2" type="text" value="Folder Level 2" -->
<!-- TemplateParam name="URLlvl2" type="text" value="folder2/index.html" -->
<!-- TemplateParam name="Statuslvl2" type="text" value="Go to Folder 2 [root]" -->
<!-- TemplateParam name="Displaylvl3" type="boolean" value="true" -->
<!-- TemplateParam name="Namelvl3" type="text" value="Folder Level 3" -->
<!-- TemplateParam name="URLlvl3" type="text" value="folder3/index.html" -->
<!-- TemplateParam name="Statuslvl3" type="text" value="Go to Folder 3 [root]" -->
<!-- TemplateParam name="Displayprev" type="boolean" value="true" -->
<!-- TemplateParam name="Nameprev" type="text" value="Previous Page" -->
<!-- TemplateParam name="URLprev" type="text" value="page2.html" -->
<!-- TemplateParam name="Statusprev" type="text" value="Back to Page 2" -->
<!-- TemplateParam name="Displaynext" type="boolean" value="true" -->
<!-- TemplateParam name="Namenext" type="text" value="Next Page" -->
<!-- TemplateParam name="URLnext" type="text" value="page4.html" -->
<!-- TemplateParam name="Statusnext" type="text" value="Forward to Page 4" -->
<!-- TemplateParam name="Namecurr" type="text" value="Page 3" -->
 
Body Region:
<span class="trail">You are here: <!-- TemplateBeginIf cond="Displayroot" -->
<a href="@@(URLroot)@@" onMouseOver="window.status='@@(Statusroot)@@';return true;" onMouseOut="window.status='';return true;">@@(Nameroot)@@</a>
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="Displaylvl1" -->
 > <a href="@@(URLlvl1)@@" onMouseOver="window.status='@@(Statuslvl1)@@';return true;" onMouseOut="window.status='';return true;">@@(Namelvl1)@@</a>
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="Displaylvl2" -->
 > <a href="@@(URLlvl2)@@" onMouseOver="window.status='@@(Statuslvl2)@@';return true;" onMouseOut="window.status='';return true;">@@(Namelvl2)@@</a>
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="Displaylvl3" -->
 > <a href="@@(URLlvl3)@@" onMouseOver="window.status='@@(Statuslvl3)@@';return true;" onMouseOut="window.status='';return true;">@@(Namelvl3)@@</a>
<!-- TemplateEndIf -->

> @@(Namecurr)@@

<!-- TemplateBeginIf cond="Displayprev" -->
 : <a href="@@(URLprev)@@" onMouseOver="window.status='@@(Statusprev)@@';return true;" onMouseOut="window.status='';return true;">@@(Nameprev)@@</a>
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="Displaynext" -->
 : <a href="@@(URLnext)@@" onMouseOver="window.status='@@(Statusnext)@@';return true;" onMouseOut="window.status='';return true;">@@(Namenext)@@</a>
<!-- TemplateEndIf --></span>
 
The Problems with Attempt 2
This methodology was almost there, but we were missing the ability to customize the separator markers for the trail, as well as for the next and previous selections. We were also forced to show those separators, (which doesn't give us much flexibility, but would have worked in a pinch).
 
The Final Attempt (100% Passed!):
This time, we were able to customize the unique trail separator, the next and previous separators, and the descriptive status bar message on the breadcrumb trail links. We were also able to programmatically control the display the separator(s)—only displaying them if the previous segment of the trail is displayed—in order to prevent the possibility of multiple separators displaying in the trail.
 
Sample Code for the Final Attempt
Our first attempt can be analyzed by looking at the files woohoo.dwt and woohoo-Index.html. Here's the code we used:
 
Head Region:
<!-- TemplateParam name="Displayintro" type="boolean" value="true" -->
<!-- TemplateParam name="Nameintro" type="text" value="You are here: " -->
<!-- TemplateParam name="BCTrailMarker" type="text" value="&amp;raquo;" -->
<!-- TemplateParam name="PrevNextMarker" type="text" value="&amp;laquo;" -->
<!-- TemplateParam name="Displayroot" type="boolean" value="true" -->
<!-- TemplateParam name="Nameroot" type="text" value="Home" -->
<!-- TemplateParam name="URLroot" type="URL" value="index.html" -->
<!-- TemplateParam name="Statusroot" type="text" value="Return to our Home Page" -->
<!-- TemplateParam name="Displaylvl1" type="boolean" value="true" -->
<!-- TemplateParam name="Namelvl1" type="text" value="Folder Level 1" -->
<!-- TemplateParam name="URLlvl1" type="URL" value="folder1/index.html" -->
<!-- TemplateParam name="Statuslvl1" type="text" value="Go to Folder 1 [root]" -->
<!-- TemplateParam name="Displaylvl2" type="boolean" value="true" -->
<!-- TemplateParam name="Namelvl2" type="text" value="Folder Level 2" -->
<!-- TemplateParam name="URLlvl2" type="URL" value="folder2/index.html" -->
<!-- TemplateParam name="Statuslvl2" type="text" value="Go to Folder 2 [root]" -->
<!-- TemplateParam name="Displaylvl3" type="boolean" value="true" -->
<!-- TemplateParam name="Namelvl3" type="text" value="Folder Level 3" -->
<!-- TemplateParam name="URLlvl3" type="URL" value="folder3/index.html" -->
<!-- TemplateParam name="Statuslvl3" type="text" value="Go to Folder 3 [root]" -->
<!-- TemplateParam name="Displayprev" type="boolean" value="true" -->
<!-- TemplateParam name="Nameprev" type="text" value="Previous Page" -->
<!-- TemplateParam name="URLprev" type="URL" value="page2.html" -->
<!-- TemplateParam name="Statusprev" type="text" value="Back to Page 2" -->
<!-- TemplateParam name="Displaynext" type="boolean" value="true" -->
<!-- TemplateParam name="Namenext" type="text" value="Next Page" -->
<!-- TemplateParam name="URLnext" type="URL" value="page4.html" -->
<!-- TemplateParam name="Statusnext" type="text" value="Forward to Page 4" -->
<!-- TemplateParam name="Namecurr" type="text" value="Page 3" -->
 
Body Region
<span class="trail">
<!-- TemplateBeginIf cond="(Displayintro==true)" -->
 @@(Nameintro)@@ 
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="Displayroot" -->
<a href="@@(URLroot)@@" onMouseOver="window.status='@@(Statusroot)@@';return true;" onMouseOut="window.status='';return true;">@@(Nameroot)@@</a>
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="(Displayroot==true)" -->
 @@(BCTrailMarker)@@ 
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="Displaylvl1" -->
<a href="@@(URLlvl1)@@" onMouseOver="window.status='@@(Statuslvl1)@@';return true;" onMouseOut="window.status='';return true;">@@(Namelvl1)@@</a>
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="(Displaylvl1==true)" -->
 @@(BCTrailMarker)@@ 
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="Displaylvl2" -->
<a href="@@(URLlvl2)@@" onMouseOver="window.status='@@(Statuslvl2)@@';return true;" onMouseOut="window.status='';return true;">@@(Namelvl2)@@</a>
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="(Displaylvl2==true)" -->
 @@(BCTrailMarker)@@ 
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="Displaylvl3" -->
<a href="@@(URLlvl3)@@" onMouseOver="window.status='@@(Statuslvl3)@@';return true;" onMouseOut="window.status='';return true;">@@(Namelvl3)@@</a>
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="(Displaylvl3==true)" -->
 @@(BCTrailMarker)@@ 
<!-- TemplateEndIf -->
 @@(Namecurr)@@ 

<!-- TemplateBeginIf cond="(Displayprev==true)" --> @@(PrevNextMarker)@@ <!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="Displayprev" -->
<a href="@@(URLprev)@@" onMouseOver="window.status='@@(Statusprev)@@';return true;" onMouseOut="window.status='';return true;">@@(Nameprev)@@</a>
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="(Displaynext==true)" --> @@(PrevNextMarker)@@ <!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="Displaynext" -->
<a href="@@(URLnext)@@" onMouseOver="window.status='@@(Statusnext)@@';return true;" onMouseOut="window.status='';return true;">@@(Namenext)@@</a>
<!-- TemplateEndIf --></span>
 
An Explanation of the Parameters
 
Parameter Name Type Function
Displayintro
B
 Set visibility of the custom Trail message (T/F)
Nameintro
T
 Customizable Trail message
BCTrailMarker
T
 Customizable Trail separator
PrevNextMarker
T
 Customizable Current/Previous/Next separator
Displayroot
B
 Set visibility of the root level (T/F)
Nameroot
T
 Customizable root text
URLroot
U
 Customizable root url (from current position)
Statusroot
T
 Customizable Status bar message
Displaylvl1 (through 3)
B
 Set visibility of sub-levels 1 through 3 (T/F)
Namelvl1 (through 3)
T
 Customizable sub-levels 1 through 3 text
URLlvl1 (through 3)
U
 Customizable sub-levels 1 through 3 url (from current position)
Statuslvl1 (through 3)
T
 Customizable Status bar message
Displayprev (next)
B
 Set visibility of previous/next link (T/F)
Nameprev (next)
T
 Customizable previous/next text
URLprev (next)
U
 Customizable previous/next url (from current position)
Statusprev (next)
T
 Customizable Status bar message
Namecurr
T
 Customizable Current location Text
 
Table Legend
T = Text,     B = Boolean (true/false),     U = URL
 
All of these items are customizable on the child page built from this template using the Modify > Template Properties... menu item, which allows you to have total control of your breadcrumb trail on each and every page.
 
Understanding Parameters and Expressions
Without the parameters and expressions, our code would look like this in the template:

Note: For the sake of simplicity, we are only looking at a single segment of the entire trail here.
 
<a href="index.html" onMouseOver="window.status='Return to our Home Page';return true;" onMouseOut="window.status='';return true;">Home</a>
 
If we decided not to use template parameters and expressions, we would've had to place the code above into an editable region in order to customize to it. As it turns out, the child page (when viewed through the browser) looks identical to this, but our trail exists in a non-editable area, allowing consistency throughout the site for position and style. If you like, you could add a parameter for the style too, but there is no way for the style sheet selections to be controlled through the Modify Template Properties dialog. Since our original goal was to control the breadcrumb trail through templates, we decided not to control the styles using a parameter. Instead, we let the template itself dictate the style, since it is much better suited to display a preview of the settings. The style selector can then be used to make the style settings.
 
Things to Consider
Because this is a home-grown breadcrumb trail method, you will have to customize each of these parameters after you initially save the child page. Once customized, you can feel free to move the files to other locations in your site's architecture. The links will be maintained because we used the URL parameter type for the URL* parameters. Cool, huh?
 
In addition, because of the interplay among these parameters and the effect of that on the final resulting code in the child page, it is possible to get things a little jacked by making an uncoordinated adjustment of these parameters. Make sure you know what you are modifying and why!
 
Modification Suggestions
There are several enhancements that you can make to this trail exercise, some of which have caveats if you apply them to a site which already contains the crumb trail as described above.
 
  1. Change the template Name* parameter values to something descriptive so that when the Modify > Template Properties... dialog is run, there is descriptive content in the parameters that is understandable to the template user.

  2. As an alternative to Modification #1, add a new optional region containing a layer that houses the instructions for the crumb trail parameters. (This method is preferred, for some, over Modification #1.)


    WARNING: If you add this after the fact in an existing site, be sure to set the parameter for the optional region to false prior to updating the site. If you do not, then this layer will be visible on every existing page based on the template. This will look bad. If this happens, you'll need to manually modify each instance page using the Modify > Template Properties... dialog. Once the site is updated, feel free to set the template parameter to true, so that any new pages created from the template display the instructions layer.

  3. Add the Namecurr expression to the template's title tag so that you don't have to remember to update the title of the document. This will create a title based on the value of the Namecurr parameter.

  4. Add or remove folder levels as required.  If adding folder levels, be sure to keep the same naming scheme for the template parameters in the head section and the regions in the body section where the crumb trail resides. Don't forget to modify the expressions that display the trail separator so that they are relevant to the appropriate folder.

    WARNING: If you add folder levels after the fact in an existing site, be sure to set the parameter for the new folder level(s) to false prior to updating the site. If you forget to do this, these newly added folder levels will be visible on every existing page based on the template. This will require manual modification of each instance page using the Modify > Template Properties... dialog. Once the site is updated, feel free to modify the template parameter to be true (displayed) so that any new pages created from the template display the full possible crumb trail path.
 
 
---------------------------------------------------------------------------------------------------------------------------

About the authors
Although a biochemist by training, Murray Summers has spent the last 20 years working in the computer industry. In 1998, Murray started his own website production company, Great Web Sights (http://www.great-web-sights.com/) and he is the co-author of Dreamweaver MX Templates. As a Team Macromedia member, he also participates in the sponsored forums for Dreamweaver and other products. He lives in rural Philadelphia with Suzanne, his lovely wife, their 12-year-old daughter Carly, a Golden Retriever, an Eskipoo, and some goldfish.

Brad Halstead (http://www.dreamweavermx-templates.com/), is a Computer Software Engineering Technologist by training, but deviated from that dream to join the Canadian Military as an Air Weapons Systems Technician where he learned all about various computerized Aircraft weapons systems as well as loading the munitions. Brad has dabbled in the web in various capacities since 1989 and left the Military to become a full-time Computer Technician. Brad tries to play an active roll in the support forums for Dreamweaver and Project Seven as time permits him to. He lives in London, Ontario with his cherished partner Brenda and their 8-year-old daughter Megan, 13-year-old daughter Amanda, 12-year-old son Aaron, and 2 Yorkshire Terriers (16-F and 12-M).

Submit feedback on our tutorials, articles, and sample applications.

 

  		 
 
  Company | Site Map | Privacy | Contact Us | Accessibility | Report Piracy
    ©1995-2003 Macromedia, Inc. All rights reserved.
Use of this website signifies your agreement to the Terms of Use.